import React from 'react';
import ReactDOM from 'react-dom';
/* 
 setState 更新数据在大部分(合成事件，钩子函数)情况下是一个异步操作；
永远不再render中调用setState

*/
class App extends React.Component {
  state = {
    count: 100,
    name: "珠峰",
  }
  add() {
    this.setState({
      count: this.state.count += 100,// count:200; this.state.count=200
    }, () => {
      console.log('第1次', this.state.count)
    })
    this.setState({
      count: this.state.count += 100,// count:300 this.state.count = 200+100 = 300
    }, () => {
      console.log('第2次', this.state.count)
    })
    this.setState({
      count: this.state.count += 100,// count:400  this.state.count = 300+100 = 400
    }, () => {
      console.log('第3次', this.state.count)
    })
    this.setState({
      count: this.state.count += 100,// count:500  this.state.count = 400+100 =500
    }, () => {
      console.log('第4次', this.state.count)
    })
  }
  changeCount(num) {
    // this.state.count += num;
    // console.log(this.state.count)
    this.setState({
      count: this.state.count + num
    }, () => {
      console.log(this.state.count)
      console.log(this.state.name)
    })
    this.setState({
      name: "珠峰培训"
    })
    // console.log(this.state.count)

  }
  minus() {
    this.state.count -= 30;
    this.state.name = '哈哈哈'
    this.setState({});
  }
  render() {
    let { count, name } = this.state;
    return <div className=''>
      <h1>{name}当前数字是{count}</h1>
      <button onClick={() => { this.changeCount(10) }}>+10</button>
      <button onClick={() => { this.changeCount(-5) }}>-5</button>
      <button onClick={() => { this.add() }}>+++++</button>
      <button onClick={() => { this.minus() }}>--</button>
    </div>;
  }
}

ReactDOM.render(<App />, document.getElementById('root'))